<template>
    <div v-if="task!==null">
        <el-container>
      <el-header>
        <div id="title">课程班级</div>
                <div><i class="el-icon-search" id="icon"></i></div>
                <el-input  placeholder="搜索课程" id="input"></el-input>
                <div id="jia">加入班级</div>
                <div id="tong">通知</div>
                <div><i class="el-icon-user-solid" id="icon1" @click="handleicon"></i></div>
      </el-header>
      <el-main style="background-color: white;">
        <div id="T1">{{ task.TaskName }}</div>
        <div id="T2">
            <el-button type="primary" round v-if="task.State=='提交中'">提交中</el-button>
            <el-button type="success" round v-if="task.State=='补交中'">补交中</el-button>
            <el-button type="danger" round v-if="task.State=='已截至'">已截至</el-button>
        </div>
        <div id="T3" @click="des()">作业描述</div>
        <div id="T4">作业内容</div>
        <div id="T5"><el-input
        type="textarea"
        :rows="15"
        placeholder="请输入内容"
        v-model="content" id="T7">
        </el-input></div>
        <el-button type="primary" id="T6" @click="upload">提交</el-button>
      </el-main>
    </el-container>
    </div>
    </template>
    <style>
    #T7{
        width: 100%;
        height: 100%;
    }
    #T6{
        position: absolute;
        top: 90%;
        left:76%;
        font-size: 20px;
        width:150px
    }
    #T5{
        border: 1px solid;
        height: 45%;
        width: 70%;
        position: absolute;
        left: 15%;
        top: 40%;
        padding: 5px;
    }
    #T4{
        border: 1px solid black;
        background-color: rgb(135, 237, 237);
        height: 70px;
        width: 140px;
        position: absolute;
        top: 200px;
        left: 15%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        color: white;
    }
    #T3{
        border: 1px solid black;
        background-color: rgb(255, 255, 255);
        height: 70px;
        width: 140px;
        position: absolute;
        top: 200px;
        left: 5%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
    }
    #T2{
        position: absolute;
        top: 15%;
        left: 16%;
    }
    #T1{
        font-size: 30px;
        font-weight: 700;
        position: absolute;
        top: 15%;
        left:5%
    }
    .grid-cotainer{
    display:grid;
    grid-template-columns: repeat(3,300px);
    grid-gap:50px;
}

  .el-header{
    background-color: rgb(85,85,85);
    color: #333;
    text-align: center;
    line-height: 80px;
  }

  
  #title{
    color: #E9EEF3;
    position:absolute;
    top: 0px;
    left:80px;
  }
  #icon{
    color: white;
    font-size: 25px;
    position: absolute;
    top:30px;
    left:700px;
  }
  #input{
    height:33px;
    width:230px;
    position: absolute;
    top:-30px;
    left:700px;
  }
  #jia{
    color: #E9EEF3;
    position:absolute;
    top: 0px;
    left:1000px;
  }
  #tong{
    color: #E9EEF3;
    position:absolute;
    top: 0px;
    left:1200px;
  }
  #icon1{
    color: white;
    font-size:40px;
    position: absolute;
    top:20px;
    left: 1350px;
  }
    </style>
    <script>
    import axios from 'axios';
    export default{
        data(){
            return{
                courseid:'',
                id:'',
                task:null,
                content:'',
                currentTime:'',
            }
        },
        beforeDestroy() {
          clearInterval(this.timer); // 在组件销毁前清除计时器
        },
        methods:{
            des(){
                this.$router.push({
                    name:'DescribePage',
                    params:{
                        id:this.id,
                        course:this.courseid
                    }
                })
            },
            updateCurrentTime() {
              const now = new Date();
              const year = now.getFullYear();
              const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1
              const day = String(now.getDate()).padStart(2, '0');
              const hours = String(now.getHours()).padStart(2, '0');
              const minutes = String(now.getMinutes()).padStart(2, '0');
              this.currentTime = `${year}-${month}-${day} ${hours}:${minutes}`; // 如果不需要秒，则不包含 `, seconds`
            },
            upload(){
              //传出 id-任务id courseid-课程id content-提交的作业内容 date-提交的时间
              //返回 success=true表示保存成功
                axios.post('http://127.0.0.1:4523/m2/5591894-5270100-default/244179351?apifoxApiId=244179351',{
                    id:this.id,
                    courseid:this.courseid,
                    content:this.content,
                    date:this.currentTime
                }).then(res=>{
                    if(res.data.success){
                        alert('提交成功')
                    }
                })
            }
        },
        mounted(){
            this.updateCurrentTime()
            this.timer = setInterval(this.updateCurrentTime, 1000);
            this.id=this.$route.params.id
            this.courseid=this.$route.params.courseid
            //传出 courseid-课程id id-课程中的任务的id
            //返回：Taskname-任务没做 State-任务状态（已截至，提交中，补交中）
            axios.post('http://127.0.0.1:4523/m2/5591894-5270100-default/244179351?apifoxApiId=244179351',{
            id:this.id,
            courseid:this.courseid
          }).then(res=>{
            this.task=res.data
          })
        }
    }
    </script>